@import "./variables.scss";

//basic
* {
  box-sizing: border-box;
  outline: none;
}
html {
  font-size: 14px;
}
body {
  font-family: arial, verdana, helvetica, "PingFang SC", "HanHei SC",
    STHeitiSC-Light, Microsoft Yahei, sans-serif;
  background: map-get($colors, "background");
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: map-get($colors, "grey");
}
p {
  margin: 0;
  padding: 0;
}

//boder
.border {
  border: 1px solid map-get($colors, "border");
}
@each $dir in (top, right, bottom, left) {
  .border-#{$dir} {
    border-#{$dir}: 1px solid map-get($colors, "border");
  }
}

// colors
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

//text align
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

//font size
@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size !important;
  }
}

//flex
.d-flex {
  display: flex;
}
.d-flex-1 {
  flex: 1;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
@each $key, $value in $flex-jc {
  .flex-jc-#{$key} {
    justify-content: $value !important;
  }
}
@each $key, $value in $flex-ai {
  .flex-ai-#{$key} {
    align-items: $value !important;
  }
}

//text overflow
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//width,height
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

//spacing
@each $typeKey, $type in $spacing-types {
  @each $sizeKey, $size in $spaceing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size;
    }
  }
  @each $sizeKey, $size in $spaceing-sizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }
  @each $directionKey, $direction in $spacing-directions {
    @each $sizeKey, $size in $spaceing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}


.nav {
  display: flex;
  align-items: center;
  ul {
    display: flex;

    li {
      margin: 0 10px;
    }
    .active > a {
      color: map-get($colors, "primary");
    }
  }

  a {
    color: map-get($colors, "white");
    transition: color 0.2s ease-in-out;

    &:hover {
      color: map-get($colors, "primary");
    }
  }
}

@each $key, $val in $screen {
  @media screen and (max-width: $val) {
    .h-#{$key} {
      display: none !important;
    }

    //space
    @each $typeKey, $type in $spacing-types {
      @each $sizeKey, $size in $spaceing-sizes {
        .#{$key}-#{$typeKey}-#{$sizeKey} {
          #{$type}: $size * $spacing-base-size;
        }
      }
      @each $sizeKey, $size in $spaceing-sizes {
        .#{$key}-#{$typeKey}x-#{$sizeKey} {
          #{$type}-left: $size * $spacing-base-size;
          #{$type}-right: $size * $spacing-base-size;
        }
        .#{$key}-#{$typeKey}y-#{$sizeKey} {
          #{$type}-top: $size * $spacing-base-size;
          #{$type}-bottom: $size * $spacing-base-size;
        }
      }
      @each $directionKey, $direction in $spacing-directions {
        @each $sizeKey, $size in $spaceing-sizes {
          .#{$key}-#{$typeKey}#{$directionKey}-#{$sizeKey} {
            #{$type}-#{$direction}: $size * $spacing-base-size;
          }
        }
      }
    }
  }
}
